<template>
  <div style="padding:0 10px 10px 10px;width:300px;max-height: 55rem;min-height: 30rem">
    <el-tabs v-model="act" @tab-click="handleClick">
      <el-tab-pane label="未读" name="unread"
      >
        <el-collapse v-model="activeNames" class="msgContent">
          <el-collapse-item v-for="o of unreadNotificationList" :key="o.id" :name="o.id">
            <template slot="title">
              <h3 style="width:15rem;white-space:nowrap;overflow: hidden; text-overflow:ellipsis">{{ o.title }}</h3>
              <el-tooltip :content="!o.read?'点击标记为已读':'已读'" placement="top">
                <i :class="getMsgCs(o)" @click="read(o)"></i>
              </el-tooltip>
            </template>
            <div class="notification_text">
              <p>{{ o.createdDate }}</p>
              <p v-html="o.context"></p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane
      >
      <el-tab-pane label="已读" name="read"
      >
        <el-collapse v-model="activeNames" class="msgContent">
          <el-collapse-item v-for="o of readNotificationList" :key="o.id" :title="o.title" :name="o.id">
            <template slot="title">
              <h3 style="width:15rem;white-space:nowrap;overflow: hidden; text-overflow:ellipsis">{{ o.title }}</h3>
            </template>
            <div class="notification_text">
              <p>{{ o.createdDate }}</p>
              <p v-html="o.context"></p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script>
import Api from "@/support/Api";
import moment from "moment";

const createNotificationContextNode=function(v,data){
    let els=[v.$createElement('div',{
      // style:{
      //   background:'red'
      // },
      domProps: {
        innerHTML: data.createdDate+"<br>"+data.context
      },
    })];
    if(data.bizType==='REMIND'){
      els.push(v.$createElement('div',{
        style:{
          marginTop:'1rem'
        },
        // domProps: {
        //   innerHTML: data.context
        // },
      },[
        v.$createElement('el-tooltip',{
          props:{
            effect:"dark",
            content:"不再提醒",
            placement:"left-start"
          }
        },[
          v.$createElement('el-button',{
            props:{
              size:'small',
              type:'success',
              icon:'el-icon-check',
              circle:true
            },
            on:{
              click(){
                v.$ge.$emit('notificationRead',data.id);
              }
            }
          })
        ]),
        v.$createElement('el-tooltip',{
          props:{
            effect:"dark",
            content:"明天提醒",
            placement:"right-start"
          }
        },[
          v.$createElement('el-button',{
            props:{
              size:'small',
              type:'primary',
              icon:'el-icon-alarm-clock',
              circle:true
            },
            on:{
              click(){
                v.$ge.$emit('notificationReadDelay',data);
              }
            }
          })
        ])
      ]))
    }
    return v.$createElement('div',els)
}

export default {
  name: "Notification",
  data() {
    return {
      delayClose:50000,
      activeNames: [],
      act: 'unread',
      readNotificationList: [],
      unreadCount: 0,
      unreadNotificationList: [],
      notificationPopList: {}
    }
  },
  mounted() {
    this.apiInvoker = Api.newInstance(this, 1, 'notification');
    let self = this;
    this.apis = {
      read: self.apiInvoker.invoker('notificationRead'),
      list: self.apiInvoker.invoker('notificationList').execute(data => {
        self.setNotificationList(data.data, 1);
      }, 'get')
    }
    this.$ge.$on('notificationRead',data=>{
      self.notificationPopList[data].close();
      self.readById(data,true);
      delete self.notificationPopList[data];
    });
    this.$ge.$on('notificationReadDelay',data=>{
      self.notificationPopList[data].close();
      self.readById(data,true);
      delete self.notificationPopList[data];
    });
  },
  methods: {
    handleClick() {
      let self = this;
      this.apis.list.execute(data => {
        self.setNotificationList(data.data);
      }, 'get');
    },
    read(data) {
      data.read = true;
      this.readById(data.id);
    },
    readById(id,refresh){
      let self=this;
      this.apis.read.execute(d => {
        self.$emit('unreadCount', --self.unreadCount);
        if(refresh){
          self.refresh();
        }
      }, 'post', {urlParam: id})
    },
    refresh() {
      let self = this;
      this.apis.list.execute(data => {
        self.setNotificationList(data.data);
      }, 'get');
    },
    getMsgCs(data) {
      return (data.read ? 'msgIconRead el-icon-success' : 'msgIconUnread el-icon-warning');
    },
    setNotificationList(data, initIn) {
      this.unreadCount = 0;
      let self = this;
      if (data.total) {
        this.unreadNotificationList = [];
        this.readNotificationList = [];
        data.dataList.forEach(d => {
          if (d.read) {
            self.readNotificationList.push(d);
            return;
          }
          ++this.unreadCount;
          self.unreadNotificationList.push(d);
        });
        this.$emit('unreadCount', this.unreadCount);
        if (initIn) {
          this.showNotification(null,  this.unreadNotificationList);
        }
      }
    },
    closeNotificationPop(id){
        delete this.notificationPopList[id];
    },
    showNotification(data,delayList) {
      let self=this;
      if (delayList && delayList.length > 0) {
        let max = delayList.length - 1, index = 0;
        let ck = setInterval(() => {
          if (index >= max) {
            clearInterval(ck);
          }
          let show = delayList[index++];
          self.notificationPopList[show.id]=
            this.$notify({
            title: show.title,
            message: createNotificationContextNode(self,show),
            offset: 250,
            duration: self.delayClose,
            onClose:self.closeNotificationPop(show.id)
          });
        }, 300);
        return;
      }
      if (data) {
        self.notificationPopList[data.id]=this.$notify({
          title: data.title,
          message: createNotificationContextNode(self, data),
          offset: 250,
          duration: self.delayClose
        });
      }
    },
    addDynamicNotification(data) {
      data.createdDate=moment().format("yyyy-MM-DD HH:mm:ss");
      this.unreadNotificationList.push(data);
      this.showNotification(data,null);
      this.$emit('unreadCount', ++this.unreadCount);
    }
  }
}
</script>

<style scoped>
.msgContent {
  min-height: 25rem;
  max-height: 50rem;
  overflow: auto
}

.msgIconRead {
  color: green;
}

.msgIconUnread {
  color: red;
}
.notification-context{
  background: red;
}
</style>
